<template>
  <div class="page main">
    <mu-icon-button icon="arrow_back_ios" class="back" @click="goBack"/>
    <span class="city">西安市</span>
    <span class="weather">晴天</span>
    <es-scroll :style="{height:ui.scrollHeight}">
      <span class="temperature">32°</span>
      <div class="subTitle">
        星期五 今天
      </div>
      <div class="hourReport">
        <es-scroll :options="ui.scroll" height="100px" width="2040px">
          <es-stackLayout>
            <div v-for="item in model.hourList" class="hourItem  waves-effect">

              <span >{{item.hour}}</span>

              <i class="material-icons yellow" style="margin-left: -72px">{{item.status}}</i>

              <span class="span2">{{item.value}}</span>
            </div>
          </es-stackLayout>
        </es-scroll>
      </div>
      <div>
        <mu-row v-for="item in model.dayList">
          <mu-col width="33" tablet="33" desktop="33" class="week">
            {{item.week}}
          </mu-col>
          <mu-col width="33" tablet="33" desktop="33">
            <i class="material-icons" style="margin-left: -58px">{{item.status}}</i>
          </mu-col>
          <mu-col width="33" tablet="33" desktop="33" class="maxMin">
            {{item.max}} {{item.min}}
          </mu-col>
        </mu-row>
      </div>
      <div class="detail">
        {{model.detail}}
      </div>
      <div class="detailList">
        <mu-row v-for="item in model.detailList">
          <mu-col width="50" tablet="50" desktop="50" class="left">
            {{item.p}}
          </mu-col>
          <mu-col width="50" tablet="50" desktop="50" class="right">
            {{item.s}}
          </mu-col>
        </mu-row>
      </div>
    </es-scroll>
  </div>
</template>

<script>

  export default{
    name: '',
    data(){
      return {
        model: {
          hourList: [
            {
              hour: '现在',
              status: 'ic_brightness_4',
              value: '22°'
            },
            {
              hour: '2:00',
              status: 'ic_wb_cloudy',
              value: '22°'
            },
            {
              hour: '3:00',
              status: 'ic_brightness_4',
              value: '22°'
            },
            {
              hour: '4:00',
              status: 'ic_brightness_4',
              value: '22°'
            },
            {
              hour: '5:00',
              status: 'ic_wb_cloudy',
              value: '22°'
            },
            {
              hour: '6:00',
              status: 'ic_brightness_4',
              value: '22°'
            },
            {
              hour: '7:00',
              status: 'ic_brightness_4',
              value: '22°'
            },
            {
              hour: '8:00',
              status: 'ic_wb_cloudy',
              value: '22°'
            },
            {
              hour: '9:00',
              status: 'ic_wb_cloudy',
              value: '22°'
            },
            {
              hour: '10:00',
              status: 'ic_wb_cloudy',
              value: '22°'
            },
            {
              hour: '11:00',
              status: 'ic_wb_cloudy',
              value: '22°'
            },
            {
              hour: '12:00',
              status: 'ic_brightness_4',
              value: '22°'
            },
            {
              hour: '13:00',
              status: 'ic_brightness_4',
              value: '22°'
            },
            {
              hour: '14:00',
              status: 'ic_brightness_4',
              value: '22°'
            },
            {
              hour: '15:00',
              status: 'ic_wb_cloudy',
              value: '22°'
            },
            {
              hour: '16:00',
              status: 'ic_brightness_4',
              value: '22°'
            },
            {
              hour: '17:00',
              status: 'ic_wb_cloudy',
              value: '22°'
            },
            {
              hour: '18:00',
              status: 'ic_wb_cloudy',
              value: '22°'
            },
            {
              hour: '19:00',
              status: 'ic_brightness_4',
              value: '22°'
            },
            {
              hour: '20:00',
              status: 'ic_wb_cloudy',
              value: '22°'
            },
            {
              hour: '21:00',
              status: 'ic_brightness_4',
              value: '22°'
            },
            {
              hour: '22:00',
              status: 'ic_brightness_4',
              value: '22°'
            },
            {
              hour: '23:00',
              status: 'ic_brightness_4',
              value: '22°'
            },
            {
              hour: '0:00',
              status: 'ic_brightness_4',
              value: '22°'
            }
          ],
          dayList: [
            {
              week: '星期六',
              status: 'ic_wb_cloudy',
              max: 36,
              min: 21
            },
            {
              week: '星期日',
              status: 'ic_wb_sunny',
              max: 34,
              min: 20
            },
            {
              week: '星期一',
              status: 'ic_wb_sunny',
              max: 37,
              min: 21
            },
            {
              week: '星期二',
              status: 'ic_wb_sunny',
              max: 37,
              min: 22
            },
            {
              week: '星期三',
              status: 'ic_wb_cloudy',
              max: 36,
              min: 22
            },
            {
              week: '星期四',
              status: 'ic_wb_cloudy',
              max: 36,
              min: 23
            },
            {
              week: '星期五',
              status: 'ic_grain',
              max: 35,
              min: 23
            },
            {
              week: '星期六',
              status: 'ic_grain',
              max: 24,
              min: 23
            },
            {
              week: '星期日',
              status: 'ic_wb_sunny',
              max: 35,
              min: 21
            }
          ],
          detail: '今天：当前局部多云。气温23°;最高气温24°。',
          detailList: [
            {
              p: '日出：',
              s: '上午5:32'
            },
            {
              p: '日落：',
              s: '下午7:59'
            },
            {
              p: '降雨概率：',
              s: '0%'
            },
            {
              p: '温度：',
              s: '47%'
            },
            {
              p: '风速：',
              s: '西北偏南 每秒2米'
            },
            {
              p: '体感温度：',
              s: '23°'
            },
            {
              p: '降水量：',
              s: '0毫米'
            },
            {
              p: '气压：',
              s: '1006百帕'
            },
            {
              p: '能见度：',
              s: '14.5公里'
            },
            {
              p: '紫外线指数：',
              s: '0'
            },
            {
              p: '空气质量指数：',
              s: '62'
            },
            {
              p: '空气质量：',
              s: '中等'
            },
          ]
        },
        ui: {
          scrollHeight: $screen.height - 120 + 'px',
          scrollWidth: $screen.width + 'px',
          scroll: {
            scrollX: true,
            scrollY: false
          },
        }
      }
    },
    methods: {
      goBack(){
        this.$router.go(-1)
      }

    },
    beforeCreate(){

    },
    created(){

    },
    beforeUpdate(){

    },
    updated(){

    },
    beforeMount(){

    },
    mounted(){

    },
    beforeDestroy(){

    },
    destroyed(){

    },
    activated(){

    },
    deactivated(){

    }
  }


</script>

<style scoped>

  .main {
    background-image: url('../asset/demo3.jpg');
    background-size: 100% 100%;
  }

  .city {
    display: block;
    font-size: 38px;
    margin-top: 24px;
    font-weight: lighter;
  }

  .weather {
    display: block;
    font-size: 18px;
    font-weight: lighter;
  }

  .temperature {
    display: block;
    font-size: 96px;
    font-weight: 100;
  }

  .back {
    position: absolute;
    top: 12px;
    left: 12px;
  }

  .subTitle {
    text-align: left;
    padding-left: 24px;
  }

  .hourReport {
    border-bottom: solid lightgray 1px;
    border-top: solid lightgray 1px;
    height: 100px;
  }

  .detail {
    text-align: left;
    padding-left: 12px;
    border-bottom: solid lightgray 1px;
    border-top: solid lightgray 1px;
  }

  .left {
    text-align: right;
    padding-right: 6px;
  }

  .right {
    text-align: left;
    padding-left: 6px;
  }

  .week {
    text-align: left;
    padding-left: 24px;
  }

  .maxMin {
    text-align: right;
    padding-right: 24px;
  }

  .hourItem {
    width: 85px;
    height: 100px;
  }

  .hourItem span{
    display: block;
    margin-top: 3px;
  }

  .hourItem i{
    display: block;
    margin-top: 12px;
  }

  .hourItem .span2{
    display: block;
    margin-top: 12px;
  }


</style>
